<template>
    <page-main>
        <template>
            <div style="margin-bottom: 20px;">
                <el-button type="primary" icon="el-icon-plus" plain size="small" @click="add">添加</el-button>
                <editProductCate ref="editProductCate" :dialog-visible="dialog.isVisible" @close="dialogClose" @success="success" />
            </div>
        </template>
        <el-table
            :header-cell-style="{background:'#F3F4F7',color:'#555'}"
            :data="tableData"
            style="width: 100%; margin-bottom: 20px;"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
            <el-table-column
                prop="label"
                label="分类名称"
            />
            <el-table-column
                prop="sortValue"
                label="排序"
            />

            <el-table-column label="操作" width="100" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="update(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="text" @click="remove(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </page-main>
</template>

<script>
import productCateApi from '@/api/init/productCate'
import editProductCate from './edit'
export default {
    name: 'ProductCate',
    components: { editProductCate },
    data() {
        return  {
            tableData: [],
            dialog: {
                isVisible: false,
                type: 'add',
                title: '添加'
            }
        }
    },
    created() {},
    mounted() {
        this.tree()
    },
    methods: {
        tree() {
            productCateApi.tree().then(res => {
                this.tableData = res.data.data
            })
        },
        dialogClose() {
            this.dialog.isVisible = false
        },
        success() {
            this.tree()
        },
        add() {
            this.dialog.isVisible = true
            this.$nextTick(() => {
                this.$refs.editProductCate.dialogType = 'add'
                this.$refs.editProductCate.dialogTitle = '添加'
                // 清空表单
                this.$refs.editProductCate.resetForm('productCateForm')
                this.$refs.editProductCate.getTableData(this.tableData)
            })
        },
        remove(index, row) {
            productCateApi.delete({ ids: [row.id] }).then(() => {
                this.success()
            })
        },
        update(index, row) {
            this.dialog.isVisible = true

            this.$nextTick(() => {
                this.$refs.editProductCate.dialogType = 'edit'
                this.$refs.editProductCate.dialogTitle = '修改'
                this.$refs.editProductCate.getTableData(this.tableData)
                this.$refs.editProductCate.getProductCate(row.id)
            })
        }

    }
}
</script>
